<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>响应命令</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <filterTitle @query="query" @reset="Reset" :formData="formData" :form="formInline">
      </filterTitle>
      <LsdTable class="lsd-table" slot="gjxm"  :paginationAtrrs="paginationAtrrs"
        @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title"
        :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" />
    </div>
  </div>
</template>

<script>
import { doNewPageList} from "@/api/EmergencyDisposal/xymld";
export default {
  components: { },
  data() {
    return {
      id: "",
      type: {
        type: "新增",
        code: "add"
      },
      pageNum: 1,
      formInline: {
        responseId: "",
        zxdwName: "",
        zyName: "",
        rwkssj: "",
        rwjssj: ""
      },
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "响应命令反馈列表",
        tableData: [],
        columns: [
          {
            prop: "zxdwName",
            label: "执行单位",
            align: "center"
          },
          {
            prop: "bmbzName",
            label: "部门/班组",
            align: "center"
          },
          {
            prop: "zyName",
            label: "专业",
            align: "left",
            "min-width": "100px"
          },
          {
            prop: "effectTime",
            label: "任务开始时间",
            align: "left",
            "min-width": "110px"
          },
          {
            prop: "linkman",
            label: "任务结束时间",
            align: "center",
            "show-overflow-tooltip": true
          },
          {
            prop: "rwfzr",
            label: "任务负责人",
            align: "center"
          },
          {
            prop: "responseId",
            label: "关联响应命令单",
            align: "left",
            "min-width": "280px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      class='commonTableStyle'
                      style='width:100%'
                      {...{
                        on: {
                          click: () => {
                            this.operinfo(row);
                          }
                        }
                      }}
                    >
                      {row.responseId}
                    </span>
                  }
                </div>
              );
            }
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            // "min-width": "300px",
            render: (h, scope) => {
              let arr = [];
              // const userId = JSON.parse(sessionStorage.getItem("account")).id;
              // const tbPower = this.common.isHasPower("tbr");
              // const spPower = this.common.isHasPower("spr");
              arr = ["查看", "人员轨迹"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      formData: [
        {
          elType: "input",
          id: "responseId",
          label: "响应命令单",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "input",
          id: "zxdwName",
          label: "执行单位",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "zyName",
          label: "专业",
          attrs: {
            value: "",
            clearable: true,
            size: "small",
            filterable: true,
            "collapse-tags": true
          },
          options: [
            {
              label: "配电",
              value: 1
            },
            {
              label: "变电",
              value: 2
            },
            {
              label: "输电",
              value: 3
            }
          ]
        },
        {
          elType: "dateTimePicker",
          id: "rwkssj",
          label: "任务开始时间",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            type: "datetime",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        },
        {
          elType: "dateTimePicker",
          id: "rwjssj",
          label: "任务结束时间",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            type: "datetime",
            "value-format": "yyyy-MM-dd HH:mm:ss"
          }
        }
      ],
      tableData: []

    };
  },
  computed: {
    getCreator() {
      const account = sessionStorage.getItem("account");
      const org = sessionStorage.getItem("org");
      const role = sessionStorage.getItem("role");
      const creator = {
        name: (account && JSON.parse(account).realName) || "",
        dept: (org && JSON.parse(org).orgName) || "",
        role: (role && JSON.parse(role)) || {},
        org: (org && JSON.parse(org)) || {}
      };
      return creator;
    }
  },
  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    // 查询
    query() {
      const params = {
        pageNum: this.paginationAtrrs["current-page"],
        pageSize: this.paginationAtrrs["page-size"],
        ...this.formInline
      };
      this.getList(params);
    },
    // 重置
    Reset() {
      this.formInline = this.$options.data().formInline;
      this.getList();
    },
    // 分页
    handleSizeChange(val) {
      this.paginationAtrrs["current-page"] = val["current-page"];
      this.paginationAtrrs["page-size"] = val["page-size"];
      this.getList();
    },
    // 获取响应命令单反馈列表
    async getList(val) {
      let params = {
        pageNum: this.paginationAtrrs["current-page"],
        pageSize: this.paginationAtrrs["page-size"]
      };
      if (val) {
        params = {
          ...val
        };
      }
      const res = await doNewPageList(params);
      this.tableData = res.data;
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
      this.total = res.total;
      this.pageNum = res.pageNum;
    },
    // 跳转详情
    operinfo(row) {
      this.$router.push({
        path: "/EmergencyResponseinfo",
        query: {
          id: row.id
        }
      });
    },
    actionHandle(item, scope) {
      if (item === "查看") {
        this.openView(scope.row);
      }
    },
    openView(row) {
      this.$router.push({
        name: "EmergencyResponseFeedbackDetail",
        query: { id: row.id }
      });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/common.less";
@import "../../../assets/style/ComponentStyle.less";
@import "../../../assets/style/pop-upNotification.less";

:deep(.peizhi) {
  display: flex;

  .el-textarea__inner {
    min-height: 35px !important;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .el-cascader {
    .el-input--small .el-input__inner {
      // height: 35px !important;
      line-height: 35px !important;
    }
  }
}

:deep(.el-tag.el-tag--info) {
  background-color: rgba(185, 206, 250) !important;
  color: #333333 !important;
  border-radius: 0px !important;
  height: 25px;
  font-size: 15px !important;
  border: none !important;
}

:deep(.el-dialog) {
  height: auto !important;
}

:deep(.preview .el-dialog__body) {
  height: 85%;
}

.EmergencyList :deep(.el-breadcrumb__inner.is-link) {
  font-weight: 400;
  color: #fff;
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: rgb(251 211 89);
}

:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover) {
  color: rgb(251 211 89);
}

:deep(.el-dialog__title) {
  font-weight: bold;
}

.box {
  // width: 100%;
  // height: 80vh;
  // padding: 0;
  // margin: 0;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-cascader .el-tag__close.el-icon-close) {
  background: none;
  font-size: 18px;
  color: #909399;
  margin-bottom: 8px;
}

:deep(.el-select .el-tag__close.el-icon-close) {
  background: none;
  font-size: 18px;
  margin-bottom: 8px;
}

:deep(.el-select .el-tag.el-tag--info .el-tag__close:hover) {
  color: #909399;
}

.videoDiv {
  justify-content: space-between;
  width: 100%;
  height: 420px;

  > :first-child {
    width: 56%;
  }

  .device {
    width: 43%;
    height: 100%;

    .deviceMain {
      width: 99%;
      height: 413px;
      border: 2px solid #3270ff;
      border-radius: 4px;
      overflow: hidden;
      background-color: rgba(213, 240, 255, 0.2);

      .deviceTitle {
        height: 31px;
        line-height: 31px;
        letter-spacing: 1px;
        font-size: 18px;
        font-weight: bold;
        padding-left: 15px;
        color: #d5f0ff;
        background-color: rgba(38, 92, 255, 0.45);
      }

      .deviceSearch {
        width: 93%;
        margin: 10px auto;

        :deep(.el-input__inner) {
          height: 35px;
          background-color: rgba(13, 38, 82, 0.58);
          border: 2px solid #008dff;
          color: #ccc;
        }
      }

      .videoTree {
        height: 330px;
        margin: 0 3.5%;
        overflow-y: auto;
      }

      :deep(.el-tree) {
        background: transparent;

        .el-tree-node:focus>.el-tree-node__content {
          background-color: transparent;
        }

        .el-tree-node__content:hover {
          background-color: transparent;
        }

        .el-tree-node__label {
          font-weight: bold;
          color: #008dff;
        }

        .el-tree-node__content {
          height: 42px;
          border-bottom: 1px solid #f2f2f2;
        }
      }
    }
  }
}

:deep(.el-dialog) {
  height: 70% !important;
  margin-top: 22vh !important;

  div::-webkit-scrollbar {
    height: 10px;
  }
}
</style>
